<template>
  <!-- 1. 新闻公告模块 -->
  <div class="news_box" slot="header">
    <span style="font-family:'宋体">新闻公告</span>
    <div class="news_box_blue"></div>
    <div class="news_box_orange"></div>
    <div class="news_box_more"><span @click="tonews">MORE +</span></div>

    <div class="img_box">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="item in imglist" :key="item.id">
          <div class="img6_box">
            <img
              :src="item.src"
              alt=""
              style="width: 100%; height: 70%"
              @click="imgclick(item.buzId)"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="m1">
      <img src="../../../assets/a11.jpg" width="60%" height="69%" />
    </div>
    <div class="img2_box">
      <el-table
        :data="list"
        :border="false"
        :stripe="false"
        max-height="180px"
        size="mini"
        :show-header="false"
        @row-click="opennotesDeatils"
      >
        <el-table-column
          v-if="showColumns.find((i) => i.label == '标题').show"
          label="标题"
          prop="title"
          width="360px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '修改时间').show"
          label="修改时间"
          prop="modifyTime"
          width="100px"
        ><template slot-scope="scope">
            {{ scope.row.createTime.substring(0, 10) }}
          </template></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      info: {},
      imglist: [],
      imageUrl: "",
      query2: {
        typeDictItemId: 1,
        pageNum: 1,
        pageSize: "",
      },
      query: {
        title: "",
        pageNum: 1,
        pageSize: 5,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
    };
  },
  created() {
    this.getList();
    this.getList2();
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },

    tohosthome() {
      this.$router.push("/homepage");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    toresources() {
      this.$router.push("/tocoursewareresources");
    },
    toTeachingresources() {
      this.$router.push("/coursewareresources");
    },
    toteachingachievements() {
      this.$router.push("/teachingachievements");
    },
    imgclick(buzId) {
      // console.log(buzId)
      // this.info.id = buzId;
      this.$router.push({ name: "noticesdetail", params: { id: buzId } });
    },
    opennotesDeatils(row) {
      console.log(row.id);
      // console.log(row.id)
      this.$router.push({ name: "noticesdetail", params: { id: row.id } });
    },

    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/notices/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getList2() {
      this.$http.post("/v1/api/attachments/page", this.query2).then((res) => {
        if (res.data.code == 0) {
          let list = res.data.data.list;
          this.list2 = res.data.data.list;
          this.total2 = res.data.data.total;
          for (let v = 0; v <= 2; v++) {
            this.imglist.push({
              id: list[v].id,
              buzId: list[v].buzId,
              src:
                "http://121.37.144.250:1010/v1/api/attachments/" + list[v].id,
            });
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
// 新闻公告模块
.news_box {
  width: 750px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 525px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.news_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.news_box_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.news_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 706px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
.img_box {
  width: 250px;
  height: 150px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 150px;
  transform: translate(-50%, -50%);
}
.img2_box {
  width: 460px;
  height: 180px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 520px;
  top: 140px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /deep/.el-table::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  /deep/ .el-table td,
  /deep/ .el-table th.is-leaf {
    border-bottom: none;
  }

  /deep/ .el-table::before {
    height: 0;
  }
}
/*最外层透明*/
/deep/.el-table,
.el-table__expanded-cell {
  background-color: #f9f9f9;
}
/* 表格内背景颜色 */
/deep/.el-table th,
/deep/.el-table tr,
/deep/.el-table td {
  background-color: #f9f9f9;
}
.m1 {
  width: 15px;
  height: 215px;
  border-radius: 2px;
  position: absolute;
  left: 280px;
  top: 185px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.img6_box {
  cursor: pointer;
}
</style>
